<include file="../header"/>
<style type="text/css">
#camera{width:598px; height:525px; position:fixed; bottom:-466px; left:50%; margin-left:-300px; border:1px solid #f0f0f0; background:url(__ROOT__/statics/images/cam_bg.jpg) repeat-y; -moz-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; -moz-box-shadow:0 0 4px rgba(0,0,0,0.6); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.6); box-shadow:0 0 4px rgba(0,0,0,0.6);}
#cam{width:100%; height:66px; display:block; position:absolute; top:0; left:0; background:url(__ROOT__/statics/images/cam.png) no-repeat center center; cursor:pointer}
#webcam{width:520px; height:370px; margin:66px auto 22px; line-height:360px; background:#ccc; color:#666; text-align:center}
.button_pane{text-align:center;}
.btn_blue,.btn_green{width:99px; height:38px; line-height:32px; margin:0 4px; border:none; display:inline-block; text-align:center; font-size:14px; color:#fff !important; text-shadow:1px 1px 1px #277c9b; background:url(__ROOT__/statics/images/buttons.png) no-repeat}
.btn_green{background:url(__ROOT__/statics/images/buttons.png) no-repeat right top;text-shadow:1px 1px 1px #498917;}
.hidden{display:none}

#photos{width:80%; margin:40px auto}
#photos:hover a{opacity:0.5}
#photos a:hover{opacity:1}
</style>
<script>
    $(function(){
        $('button#send').click(function(){
        var mobile = $('input[name=mobile]').val();
        var vipName = $('input[name=vipName]').val();
        var idcardNumber = $('input[name=idcardNumber]').val();
        var birthday = $('input[name=birthday]').val();
        var headImageUrl = $('input[name=headImageUrl]').val();
        
         //验证手机号格式
            if(!mobileValidate($.trim(mobile))) {             
                return false;
            }
            if(vipName===''||vipName===null) {
                layer.msg('会员名称不能为空!');
                return false;
            }
            //验证身份证格式--非必选,不为空则验证
            if(idcardNumber!=null&&idcardNumber!=''){
                if(!identityCodeValidate($.trim(idcardNumber))){
                    return false;
                }
            }
            //验证生日格式--非必选,不为空则验证
            if(birthday!=null&&birthday!=''){
                if(!birthdayValidate($.trim(birthday))){
                    return false;
                }
            }
//            if(headImageUrl===''||headImageUrl===null) {
//                layer.msg('请拍照并上传头像!');
//                return false;
//            }else{
                $("form").submit();
//            }
        });
    });
    
</script>
</head>
<body class="J_scroll_fixed">
	<div class="wrap jj">
		<div class="common-form">
			<form method="post" class="form-horizontal J_ajaxForm" action="{:U('vip/add_post')}">
				<fieldset>
					<div class="control-group">
						<label class="control-label">手机:</label>
						<div class="controls">
							<input type="text" class="input" name="mobile" value="">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">姓名:</label>
						<div class="controls">
							<input type="text" class="input" name="vipName" value="">
						</div>
					</div>
					 
					<div class="control-group">
						<label class="control-label">身份证号:</label>
						<div class="controls">
							<input type="text" class="input" name="idcardNumber" value="">
						</div>
					</div> 
					<div class="control-group">
						<label class="control-label">性别:</label>
						<div class="controls">
							<select  class="form-control selectpicker sel1" name="gender">
							 <option value="{$gender.MALE}" selected="selected">男</option>
							 <option value="{$gender.FEMALE}">女</option>
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">生日:</label>
						<div class="controls">
                                                    <input type="text" name="birthday" class="input length_2 J_date" value="" autocomplete="off">
						</div>
					</div>

					<div class="control-group">
						<label class="control-label">拍照</label>
						<div class="controls" id="ppic">
							<input type="hidden" class="input" name="headImageUrl" id="imgurl" value="">
							<span>点击下方摄像头进行拍照</span>
						</div>
					</div>
				</fieldset>
				<div id="camera">
                                <div id="cam"></div>
			       	<div id="webcam"></div>
				       <div id="buttons">
				    	  <div class="button_pane" id="shoot">
				        	<a id="btn_shoot" href="" class="btn_blue">拍照</a>
				          </div>
				          <div class="button_pane hidden" id="upload">
				        	<a id="btn_cancel" href="" class="btn_blue">取消</a> <a id="btn_upload" href="" class="btn_green">上传</a>
				          </div>
				       </div>
				</div>
				<div class="form-actions">
					<button type="button"
						class="btn btn-primary" id="send">添加</button>
					<a class="btn" href="javascript:history.go(-1);">返回</a>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="__ROOT__/statics/js/datePicker/datePicker.js"></script>
	<script type="text/javascript">
	var tmp="__ROOT__";
	var uploadUrl="{:U('Vip/photoupload')}";
	//日期选择器
    var dateInput = $("input.J_date")
	console.log(dateInput);
    if (dateInput.length) {
        Wind.use('datePicker', function () {
            dateInput.datePicker();
        });
    }
	</script>
	<script type="text/javascript" src="__ROOT__/statics/js/jquery.js"></script>
	<script src="__ROOT__/statics/js/common.js"></script>
<script type="text/javascript" src="__ROOT__/statics/js/webcam/jquery.easing.js"></script>
<script type="text/javascript" src="__ROOT__/statics/js/webcam/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript" src="__ROOT__/statics/js/webcam/webcam.js"></script>
	<script type="text/javascript" src="__ROOT__/statics/js/webcam/script.js"></script>
</body>
</html>